<template>
	<ucs-svg :width="size" :height="size" :src="iconSvg" />
</template>
<script setup lang="uts">
	/**
	 * @description 《淘宝》图标
	 * @tutorial https://ucs.cloudsimpler.com/library/ucs-iconPark
	 * @property {Number} size 图标大小
	 * @property {Number} strokeWidth 线段粗细
	 * @property {String} theme 图标大小
	 * @property {Array<string>} fill 图标颜色，["外部描边颜色","外部填充颜色","内部描边颜色","内部填充颜色"]
	 * @property {String} strokeLinecap 图标大小
	 * @property {String} strokeLinejoin 图标大小
	 */
	import { colors, IiconParkProps } from "../../mixins/iconParkMixin.uts";
	import { computed } from "vue";
	
	const props = withDefaults(defineProps<IiconParkProps>(), {
		size: 24,
		strokeWidth: 4,
		theme: 'outline',
		fill: ["#000000"],
		strokeLinecap: 'round',
		strokeLinejoin: 'round'
	});

	const iconSvg = computed(() : string => {
		return `<?xml version="1.0" encoding="UTF-8"?><svg width="${props.size}" height="${props.size}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM24 4.36364C13.1551 4.36364 4.36364 13.1551 4.36364 24C4.36364 34.8449 13.1551 43.6364 24 43.6364C34.8449 43.6364 43.6364 34.8449 43.6364 24C43.6364 13.1551 34.8449 4.36364 24 4.36364ZM19.1273 11.6177L22.7626 12.3626C22.6634 13.0622 22.4273 13.8541 22.0543 14.7383C23.2431 14.31 24.3806 13.9947 25.466 13.7917C27.8531 13.3454 29.7082 13.0909 31.5472 13.0909C33.3862 13.0909 34.8014 13.1095 36.5962 14.5261C37.7129 15.4076 38.3999 16.5671 38.6572 18.0045L38.7058 18.3168V30.9897C38.7058 31.8359 38.4803 32.7094 38.0292 33.6101C37.6064 34.4546 36.7928 34.932 35.5885 35.0423L35.3424 35.0595H27.8024C27.3202 33.6504 27.3202 32.8184 27.8024 32.5637C28.5256 32.1816 31.3051 33.2064 32.5259 32.5637C33.2855 32.1638 33.6722 31.4194 33.6858 30.3307L33.6831 30.0921V18.1324C33.6831 16.2794 32.5496 14.9986 29.0578 15.189C27.1624 15.2924 24.9495 15.763 22.4192 16.601L23.2411 16.851L24.2327 17.1886V17.5143C24.2327 18.0662 24.6428 18.5237 25.1772 18.5955L25.3025 18.605L32.6004 18.7457V20.7543H27.1449V23.2534H32.6004V24.8061H27.0854L27.1449 29.6797C27.6591 29.7188 28.1662 29.6142 28.6661 29.3658C29.0013 29.1993 29.2635 28.9579 29.4526 28.6415L29.0889 27.9224C29.0885 27.9216 29.0881 27.9209 29.0877 27.9201C28.8361 27.4205 29.0048 26.8192 29.4611 26.5189L29.5714 26.4551L30.8247 25.8239C30.8745 25.7989 30.9261 25.7776 30.9791 25.7605C31.5114 25.588 32.0798 25.8465 32.307 26.3432L32.3532 26.462L33.0964 28.7558C33.2436 29.2102 33.0774 29.7019 32.6981 29.976L32.5894 30.0451L31.689 30.5466C31.6765 30.5536 31.6639 30.5603 31.6511 30.5667C31.152 30.8195 30.5504 30.6522 30.249 30.1966L30.185 30.0865L30.1714 30.0629C29.6195 30.6617 29.0968 31.1206 28.6034 31.4398C27.7867 31.9681 26.9058 32.3985 25.8899 32.4665L25.6095 32.4759H20.3553C19.9292 32.4759 19.1567 32.1994 18.3633 31.4398C17.8785 30.9756 17.5835 30.2517 17.4785 29.268L17.4545 28.9933V26.2516H21.6108C21.6443 27.4372 21.7552 28.3511 21.9437 28.9933C22.1196 29.5926 22.5858 29.8319 23.3422 29.7111L23.5088 29.6797V24.8061H17.4545V23.2534H23.5088V20.7543H22.3509L20.5157 23.0498L18.5174 21.7861C19.7463 20.4007 20.498 19.5036 20.7724 19.0947C21.0468 18.6858 21.0468 17.9813 20.7724 16.9814L20.8189 17.1633L20.7778 17.1801C20.07 18.2499 19.1326 19.2869 17.9657 20.2909L17.5827 20.6125L15.0765 18.1365C16.2176 17.2504 17.053 16.4263 17.5827 15.6642C18.1124 14.9021 18.6273 13.5533 19.1273 11.6177ZM11.4318 17.788L15.0085 21.15C16.3057 22.3693 16.7268 24.2477 16.093 25.8952L16.0043 26.1087L12.2945 34.4169L8.20691 31.5766L13.409 26.0677C13.4785 25.9941 13.5428 25.9157 13.6014 25.8332C14.2643 24.9 14.0893 23.624 13.2279 22.9005L13.0862 22.791L9.37195 20.1527L11.4318 17.788ZM13.6364 10.9091C15.1426 10.9091 16.3636 12.1301 16.3636 13.6364C16.3636 15.1426 15.1426 16.3636 13.6364 16.3636C12.1301 16.3636 10.9091 15.1426 10.9091 13.6364C10.9091 12.1301 12.1301 10.9091 13.6364 10.9091Z" fill="${colors(props.theme, props.fill, 0)}"/></svg>`
	});
</script>